<template>
  <j-modal :title="title" :width="700" :visible="visible" switchFullscreen @cancel="handleCancel" @ok="handleOk"
    :cancelButtonProps="footerBtnProps" :okButtonProps="footerBtnProps">
    <a-form-model ref="form" :model="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" :rules="formRules">
      <a-row :gutter="30">
        <a-col :span="12">
          <a-form-model-item label="姓名：" prop="name">
            <a-input v-model="form.name" placeholder="请输入" :disabled="disabled" />
          </a-form-model-item>
          <a-form-model-item label="联系电话：" prop="telphone">
            <a-input-number style="width: 100%;" v-model="form.telphone" :step="1" placeholder="请输入" :disabled="disabled" />
          </a-form-model-item>

          <a-form-model-item label="擅长领域：" prop="businessArea">
            <a-select v-model="form.businessArea" mode="multiple">
              <a-select-option v-for="(item, index) in areaSelect" :key="index" :value="item.value">{{item.label}}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <j-image-upload v-model="form.avatarId" :disabled="disabled" bizPath="scott/pic" :isMultiple="false" />
        </a-col>
      </a-row>

      <a-form-model-item label="简介：" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" prop="briefIntroduction">
        <a-textarea v-model="form.briefIntroduction" placeholder="请输入" :auto-size="{ minRows: 2, maxRows: 5 }"
          :disabled="disabled" />
      </a-form-model-item>
    </a-form-model>
  </j-modal>
</template>
<script>
  import {
    addMechTeacher
  } from '@/api/sjsk/psycholog/organize/index.js'
  export default {
    name: 'LawyerModal',
    props: {
      disabled: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      footerBtnProps: function() {
        return {
          style: {
            display: this.disabled ? 'none' : 'inline-block'
          }
        }
      }
    },
    data() {
      return {
        title: '新增咨询师',
        visible: false,
        areaOptions: [],
        areaSelect: [
          {
            label: '心理干预',
            value: '1'
          },
          {
            label: '婚姻挽救',
            value: '2'
          },
          {
            label: '抑郁症',
            value: '3'
          },
          {
            label: '人际关系障碍',
            value: '4'
          },
          {
            label: '亲子关系',
            value: '5'
          },
          {
            label: '失眠',
            value: '6'
          },
          {
            label: '焦虑',
            value: '7'
          }
        ],
        form: {
          "businessArea": [],
          
          
          "briefIntroduction": "",
          "name": "",
          "telphone": "",
          "avatarId": "",
        },
        formRules: {
          name: {
            required: true,
            message: '请输入',
            trigger: ['blur']
          },
          businessArea: {
            required: true,
            type: 'array',
            message: '请输入',
            trigger: ['blur']
          },
          telphone: {
            required: true,
            type: 'number',
            message: '请输入',
            trigger: ['blur']
          },
          briefIntroduction: {
            required: true,
            message: '请输入',
            trigger: ['blur']
          },
        }
      }
    },
    methods: {
      
      show(data, id) {
        this.visible = true
        if (data) {
          this.title = '编辑咨询师'
          const form = JSON.parse(JSON.stringify(data))
          form.businessArea = form.businessArea.split(',')
          form.telphone = Number(form.telphone)
          this.form = form
        } else {
          this.title = '新增咨询师'
          this.form.mechanismId = id
        }
        if (this.disabled) {
          this.title = '咨询师详情'
        }
      },
      handleCancel() {
        this.visible = false
        this.form = {
          "businessArea": [],
          
          
          "briefIntroduction": "",
          "name": "",
          "telphone": "",
          "avatarId": "",
        }
      },
      handleOk() {
        this.$refs.form.validate().then(res => {
          const form = JSON.parse(JSON.stringify(this.form))
          form.businessArea = form.businessArea.toString()
          addMechTeacher(form).then(res => {
            const {
              success,
              message
            } = res
            if (success) {
              this.handleCancel()
              this.$message.success('添加成功！')
              this.$emit('success')
            } else {
              this.$message.error(message)
            }
          })
        })

      }
    },
  }
</script>
<style lang="less" scoped>
  /deep/.ant-form-item {
    margin-bottom: 10px;
  }
  /deep/.ant-input-number-handler-wrap {
    //   display: none;
  }

</style>
